<template>
    <!-- 这是上面图表二的 -->
    <div id="main2"></div>
</template>
  
<script>
import * as echarts from "echarts";
// import axios from "axios";
export default {
    data() {
        return {
            DataList: [],
            yuanShuJu: [],
        };
    },
    methods: {
        // 请求接口，获取数据
        getDataList() {
            this.DataList = []
            this.DataList = this.yuanShuJu.map(items => {
                return {
                    value: items.count,
                    name: items.suoshuhangye
                }
            })
            console.log(this.DataList, 'this.DataList');
            this.initCharts();
            const viewElem = document.body;
            const resizeObserver = new ResizeObserver(() => {
                // 此处放 当窗口大小发生变化时，想要让宽高自适应的图表的.resize()，除此处外其余都是固定写法，举例如下
            });
            resizeObserver.observe(viewElem);
        },
        // 柱状图
        initCharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main2"));
            // 实现相应式，跟随页面变化
            window.addEventListener("resize", () => {
                myChart.resize();
            });
            // 指定图表的配置项和数据
            var option = {
                legend: {
                    orient: 'vertical',//可设定图例水平（horizontal）排列还是竖直排列
                    x: 'right',      //可设定图例在左、右、居中
                    y: 'center',     //可设定图例在上、下、居中
                    padding: [0, 28, 0, 0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    textStyle: {
                        color: 'aliceblue' // 修改图例文字颜色为红色
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: [10, 100],
                        center: ['38%', '45%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        // data: [
                        //     { value: 40, name: '纺织' },
                        //     { value: 38, name: '机械制作' },
                        //     { value: 32, name: '电子商务' },
                        //     { value: 30, name: '餐饮' },
                        //     { value: 28, name: '汽车销售' },
                        //     { value: 26, name: '旅游业' },
                        //     { value: 22, name: '化工' },
                        //     { value: 18, name: '核工' }
                        // ]
                        data: [...this.DataList]
                    }
                ]
            };
            myChart.setOption(option);
        },
    },
};
</script>
  
<style>
#main2 {
    height: 240px;
    /* width: 600px; */
    box-sizing: border-box;
    /* padding: 5px */
}
</style>
  